<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/${initParam.context_root }/script/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/${initParam.context_root }/css/default.css" />
<link rel="stylesheet" type="text/css" href="/${initParam.context_root }/css/component.css" />
<link href="/${initParam.context_root }/css/starter-template3.css" rel="stylesheet">
<script src="/${initParam.context_root }/script/modernizr.custom.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		firstGetMessage();
		setInterval("realTimeGetMessage()", 2000);
	});

	function firstGetMessage() {
		$
				.ajax({
					url : "/${initParam.context_root }/chatting/firstGet.do",
					type : "GET",
					data : "fromId=${sessionScope.login_info.id }&toId=${sessionScope.member_info.id}",
					dataType : "JSON",
					success : function(json) {
						var content = document.getElementById("content");
						for (var i = 0; i < json.length; i++) {
							if (json[i].picturePath == null) {
								if (json[i].fromId == '${sessionScope.member_info.id}') {
									content.innerHTML = "<li><time class='cbp_tmtime' datetime=''"
											+ "><span>2014/11/19</span><span>05:10</span></time><div class='cbp_tmicon cbp_tmicon-phone'></div><div class='cbp_tmlabel'><h2>"
											+ json[i].fromId
											+ "님 으로부터 날아온 뻐꾸기입니다. "
											+ "</h2><p>"
											+ json[i].message
											+ "</p></div></li>"
											+ content.innerHTML;

								} else {
									content.innerHTML = "<li><time class=\"cbp_tmtime\" datetime=\""
										+ "\"><span>2014/11/19</span><span>05:10</span></time><div class=\"cbp_tmicon cbp_tmicon-phone\"></div><div class=\"cbp_tmlabel\"><h2>"

											+ json[i].fromId
											+ "님 으로부터 날아온 뻐꾸기입니다. "
											+ "</h2><p>"
											+ json[i].message
											+ "</p></div></li>"
											+ content.innerHTML;
								}
							} else {
								if (json[i].fromId == '${sessionScope.member_info.id}') {
									content.innerHTML = "<li><time class=\"cbp_tmtime\" datetime=\""
										+ "\"><span>2014/11/19</span><span>05:10</span></time><div class=\"cbp_tmicon cbp_tmicon-phone\"></div><div class=\"cbp_tmlabel\"><h2>"
											+ json[i].fromId
											+ "님 으로부터 날아온 뻐꾸기입니다. "
											+ "</h2><p><img src='"+json[i].picturePath+"' width='650'></img></p></div></li>"
											+ content.innerHTML;

								} else {
									content.innerHTML = "<li><time class=\"cbp_tmtime\" datetime=\""
										+ "\"><span>2014/11/19</span><span>05:10</span></time><div class=\"cbp_tmicon cbp_tmicon-phone\"></div><div class=\"cbp_tmlabel\"><h2>"
											+ json[i].fromId
											+ "님 으로부터 날아온 뻐꾸기입니다. "
											+ "</h2><p><img src='"+json[i].picturePath+"' width='650'></img></p></div></li>"
											+ content.innerHTML;
								}
							}
						}
					}
				});
	}

	function realTimeGetMessage() {
		$
				.ajax({
					url : "/${initParam.context_root }/chatting/realTimeGet.do",
					type : "GET",
					data : "fromId=${sessionScope.login_info.id}&toId=${sessionScope.member_info.id}",
					dataType : "JSON",
					success : function(json) {
						var content = document.getElementById("content");
						for (var i = 0; i < json.length; i++) {
							if (json[i].picturePath == null) {
								content.innerHTML = "<li><time class=\"cbp_tmtime\" datetime=\""
									+ "\"><span>2014/11/19</span><span>05:10</span></time><div class=\"cbp_tmicon cbp_tmicon-phone\"></div><div class=\"cbp_tmlabel\"><h2>"
										+ json[i].fromId
										+ "님 으로부터 날아온 뻐꾸기입니다. "
										+ "</h2><p>"
										+ json[i].message
										+ "</p></div></li>"
										+ content.innerHTML;
							} else {
								content.innerHTML = "<li><time class=\"cbp_tmtime\" datetime=\""
									+ "\"><span>2014/11/19</span><span>05:10</span></time><div class=\"cbp_tmicon cbp_tmicon-phone\"></div><div class=\"cbp_tmlabel\"><h2>"
										+ json[i].fromId
										+ "님 으로부터 날아온 뻐꾸기입니다. "
										+ "</h2><p><img src='"+json[i].picturePath+"' width='650'></img></p></div></li>"
										+ content.innerHTML;
							}
						}
					}
				});
	}

	function sendPicture() {
		$('#uploadPicture')
				.ajaxSubmit(
						{
							dataType : 'json',
							success : function(json) {
								var content = document
										.getElementById("content");
								content.innerHTML = "<li><time class=\"cbp_tmtime\" datetime=\""
									+ "\"><span>2014/11/19</span><span>05:10</span></time><div class=\"cbp_tmicon cbp_tmicon-phone\"></div><div class=\"cbp_tmlabel\"><h2>"
										+ json.fromId
										+ "님 으로부터 날아온 뻐꾸기입니다. "
										+ "</h2><p><img src='"+json.picturePath+"' width='650'></img></p></div></li>"
										+ content.innerHTML;
							}
						});
	}

	function sendMessage() {
		$
				.ajax({
					url : "/${initParam.context_root }/chatting/sendMessage.do",
					type : "GET",
					data : "toId=${sessionScope.member_info.id }&fromId=${sessionScope.login_info.id}&fromNickname=${sessionScope.login_info.nickname}&toNickname=${sessionScope.member_info.nickname }&message="
							+ encodeURI($("#message").val(), "UTF-8"),
					dataType : "JSON",
					success : function(json) {
						var content = document.getElementById("content");
						content.innerHTML = "<li><time class=\"cbp_tmtime\" datetime=\""
							+ "\"><span>2014/11/19</span><span>05:10</span></time><div class=\"cbp_tmicon cbp_tmicon-phone\"></div><div class=\"cbp_tmlabel\"><h2>"
								+ json.fromId
								+ "님 으로부터 날아온 뻐꾸기입니다. "
								+ "</h2><p>"
								+ json.message
								+ "</p></div></li>"
								+ content.innerHTML;

						$("#message").val('');
					}
				});
	}
</script>

<!-- 인풋 타입 CSS -->

<body>
	<div class="container">
	<div class="starter-template" style="padding-top: 60px">
		<textarea class="form-control" rows="3" cols="10" name="message" id="message"
			placeholder="그에게 사랑을 전하세요...." onKeyDown="javascript:if (event.keyCode == 13) {sendMessage(); }"></textarea>
		<br> <input type="button" value="메시지 전송" onclick="sendMessage();" class="btn btn-primary">
		<input type="button" name="button" onclick="sendPicture();" class="btn btn-primary" value="사진 전송">

		<form id="uploadPicture" action="/${initParam.context_root }/chatting/sendPicture.do"
			method="post">
			<input type="file" id="picture" name="picture"> 
			<input type="hidden" name="fromId" value="${sessionScope.login_info.id }">
			<input type="hidden" name="toId" value="${sessionScope.member_info.id }"> 
			<input type="hidden" name="fromNickname" value="${sessionScope.login_info.nickname }">
			 <input type="hidden" name="toNickname"	value="${sessionScope.member_info.nickname }">
		</form>
	</div>	
	</div>
	<br>
	<!-- 여기서 부터 CSS 먹인 메인 타임라인 -->
	<div class="container">
		<header class="clearfix">
			<span>우리들만의 비밀 공간 -</span>
			<h1>사랑의 타임라인&hearts;</h1>
			<nav>
				<a href="#" class="icon-arrow-left"></a> <a href="#" class="icon-drop"></a>
			</nav>
		</header>
		<div class="main">
			<ul class="cbp_tmtimeline" id="content">
				<!-- 여기 li 태그에서부터 반복해서 값이 들어감 -->

				<!-- 반복 끝 -->
			</ul>
		</div>
	</div>

	<!-- 여기가 끝 -->

</body>
